<template>
<view>
<view class="container">
    <form bindsubmit="prepaySubmit">
      <view class="pay_top" @tap="showChooseStore" v-if="mer_data.store_list && store_data.name">
        <text class="i">付款给</text>
        <text class="span">{{ store_data.name }}</text>
        <text class="em">更换</text>
      </view>
      <view class="inputBox bw">
          <view class="item">
              <view class="title">消费总额:</view>
              <input type="digit" placeholder="询问服务员后输入" name="total_money" @input="inputTotalMoney" :focus="total_focus"></input>
          </view>
          <block v-if="store_data.discount_type != 0">
            <view class="tip">输入不参与优惠金额(酒水、特价菜等)</view>
            <view class="item">
                <view class="title">不可优惠金额:</view>
                <input type="digit" placeholder="询问服务员后输入" name="no_discount_money" @input="inputNoMoney"></input>
            </view>
          </block>
      </view>
      <view class="bw discount clearfix" v-if="store_data.discount_type && store_data.discount_type != 0">
          <view class="fl" v-if="store_data.discount_type == 1"><text class="i zhe">折</text>{{store_data.discount_percent}}折</view>
          <view class="fl" v-else-if="store_data.discount_type == 2"><text class="i jian">减</text>每满{{currency + store_data.condition_price}}减{{currency + store_data.minus_price}}</view>
          <view :class="'fr cg ' + (discount_money > 0 ? 'show' : 'hide')">-{{discount_money}}</view>
      </view>
      <button class="block_btn mlr20" formType="submit">确认支付</button>
    </form>
    <view class="choice" v-if="showChooseStore && mer_data.store_list">
      <view class="h2">请选择所在的门店</view>
      <scroll-view class="iscroll" scroll-y>
        <view class="ul">
          <block v-for="(item, index) in mer_data.store_list" :key="index">
            <view class="li" @tap="chooseStore" :data-id="index">
              <view class="lh2">{{ item.name }}</view>
              <view class="p">{{ item.adress }}</view>
              <view class="distance" v-if="item.range">距离您的位置 {{item.range}}</view>						
            </view>
          </block>
        </view>
      </scroll-view>
      <view class="close" v-if="store_data.name" @tap="closeChooseStore">关闭</view>
    </view>
    <view class="mask" v-if="showChooseStore" @tap="closeChooseStore"></view>
</view>


<auth_btn is="auth_btn" :data="showAuthBtn"></auth_btn>
</view>
</template>

<script>
import common from '../../utils/common.js'
var totalMoney = 0,
    noMoney = 0;
var app = getApp();
var _this;
const getUserInfo = that => {
  common.getUserInfo(function (userInfo) {
    if (that.data.mer_id) {
      common.getLocation('getPay', that, 'baidu');
    } else {
      that.getPay();
    }
  }, 'setting');
};

export default {
  data() {
    return {
      total_focus: false,
      store_id: 0,
      mer_id: 0,
      store_data: {},
      mer_data: {},
      discount_money: 0,
      showChooseStore: true,
	  currency: '¥'
    };
  },

  onUnload: function () {},
  onHide: function () {},
  onShow: function () {},
  onReady: function () {},
  onLoad: function (options) {
    console.log(options);
    _this = this;
    common.setMainColor(_this);

    if (!options.store_id) {
      options.store_id = 0;
    }

    if (!options.mer_id) {
      options.mer_id = 0;
    }

    if (options.mer_id > 0) {
      options.showChooseStore = true;
    } else {
      options.showChooseStore = false;
    }

    this.setData({
      store_id: options.store_id,
      mer_id: options.mer_id,
      showChooseStore: options.showChooseStore
    });
    var that = this;
    var ticket = wx.getStorageSync('ticket');

    if (!ticket) {
      wx.getSetting({
        success(res) {
          if (res.authSetting['scope.userInfo'] == true) {
            getUserInfo(that);
          } else {
            that.setData({
              showAuthBtn: true
            });
          }
        }

      });
    } else {
      getUserInfo(that);
    }
	common.changeCurrency(this)
  },

  methods: {
    inputTotalMoney: function (e) {
      totalMoney = parseFloat(e.detail.value);

      if (isNaN(totalMoney)) {
        totalMoney = 0;
      }

      this.plusMoney();
    },
    inputNoMoney: function (e) {
      noMoney = parseFloat(e.detail.value);

      if (isNaN(noMoney)) {
        noMoney = 0;
      }

      this.plusMoney();
    },
    plusMoney: function () {
      var discount_money = 0;

      if (noMoney <= totalMoney) {
        if (this.store_data.discount_type == 1) {
          discount_money = parseFloat(((totalMoney - noMoney) * (1 - this.store_data.discount_percent / 10)).toFixed(2));
        } else if (this.store_data.discount_type == 2) {
          discount_money = Math.floor((totalMoney - noMoney) / this.store_data.condition_price) * this.store_data.minus_price;
        }
      }

      this.setData({
        discount_money: discount_money
      });
    },
    saveOrderReslt: function (res) {
      wx.hideToast();
      wx.navigateTo({
        url: "../pay/index?type=" + res.order_type + '&order_id=' + res.order_id
      });
    },
    prepaySubmit: function (e) {
      console.log(e);
      var error = '';
      var totalMoney = parseFloat(e.detail.value.total_money);
      var no_discount_money = parseFloat(e.detail.value.no_discount_money);

      if (totalMoney == 0 || isNaN(totalMoney)) {
        error = '请输入正确的消费金额';
      } else if (no_discount_money > totalMoney) {
        error = '不可优惠金额不可大于消费金额';
      }

      if (error != '') {
        wx.showModal({
          title: '提示',
          content: error,
          showCancel: false
        });
      } else {
        common.post('My&a=store_order', {
          store_id: this.store_data.store_id,
          total_money: totalMoney,
          no_discount_money: no_discount_money
        }, "saveOrderReslt", this);
      }
    },
    setMainContent: function (result) {
      if (this.mer_id && result.store_list) {
        this.setData({
          mer_data: result
        });
      } else {
        this.setData({
          store_data: result,
          total_focus: true,
          showChooseStore: false
        });
        wx.setNavigationBarTitle({
          title: result.store_name
        });
      }

      wx.hideToast();
    },

    authGetUserInfo(res) {
      var _this = this;

      if (res.detail.errMsg == 'getUserInfo:ok') {
        _this.setData({
          showAuthBtn: false
        });

        getUserInfo(_this);
      }
    },

    getPay: function (gps) {
      var postData = {
        store_id: this.store_id,
        mer_id: this.mer_id
      };

      if (gps) {
        postData.lng = gps.lng;
        postData.lat = gps.lat;
      }

      common.post('My&a=pay', postData, "setMainContent", this);
    },
    chooseStore: function (e) {
      console.log(this.mer_data);
      var data = this.mer_data.store_list[e.currentTarget.dataset.id];
      data.pay_notice = this.mer_data.pay_notice;
      data.score_notice = this.mer_data.score_notice;
      this.setData({
        store_data: data,
        showChooseStore: false,
        total_focus: true
      });
      console.log(this.store_data);
    },
    showChooseStore: function () {
      this.setData({
        showChooseStore: true
      });
    },
    closeChooseStore: function () {
      if (this.store_data.name) {
        this.setData({
          showChooseStore: false
        });
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
.inputBox{
    margin-bottom:40rpx;
    padding:20rpx 0;
}
.inputBox .item{
    margin:20rpx 12rpx;
    padding:18rpx 22rpx;
    border:2rpx solid #e5e5e5;
    display:-webkit-box;
}
.inputBox .item input{
    width: 100%;
    display: block;
    text-align: right;
    -webkit-box-flex: 1;
    padding:6rpx 0;
}
.inputBox .item .title{
    padding:6rpx 0;
}
.tip{
    color: gray;
    font-size:24rpx;
    margin:10rpx 0 10rpx 20rpx;
}
.discount{
    padding:26rpx 20rpx;
    color:red;
    line-height:32rpx;
}


.choice {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 100;
}
.choice .h2 {
    text-align: center;
    background: #2ecc71;
    border-radius: 10rpx 10rpx 0 0;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: bold;
    line-height: 100rpx;
}
.mask {
    position: fixed;
    z-index: 99;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}

.choice .iscroll {
    height: 600rpx;
    overflow-x: hidden;
    background: #fff;
}
.choice .ul{
  background: #f5f3f9;
  padding: 20rpx 0;
}
.choice .li {
    padding: 20rpx 40rpx;
    margin-bottom: 20rpx;
    background: #fff;
    line-height: 40rpx;
    border-bottom: #f1f1f1 1rpx solid;
}
.choice .li .lh2{
    font-size: 15px;
    color: #333333;
    padding-bottom: 2px;
}
.choice .li .p{
    font-size: 24rpx;
    color: #666666;
}
.choice .li .distance {
    font-size: 24rpx;
    color: #2ecc71;
    padding-left: 24rpx;
    background: url(https://hf.pigcms.com/static/wxapp/dbt_03.png) left center no-repeat;
    background-size: 16rpx 20rpx;
}
.choice .li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.choice .close {
    background: #ffffff;
    line-height: 100rpx;
    font-size: 32rpx;
    color: #000000;
    text-align: center;
    border-top: #f1f1f1 1rpx solid;
}

.pay_top {
    padding: 0 20rpx;
    font-size: 28rpx;
    line-height: 100rpx;
    border-bottom: #f1f1f1 1rpx solid;
}
.pay_top .i {
  color: #666666;
  margin-right:10rpx;
}
.pay_top .span {
  color: #333333;
  margin-right:10rpx;
}
.pay_top .em{
    color: #2ccd70;
    font-size: 24rpx;
    line-height: 60rpx;
    display: inline-block;
}
.discount .i{
    display:inline-block;
    width: 32rpx;
    height: 32rpx;
    border-radius: 100%;
    text-align: center;
    font-size: 20rpx;
    line-height: 32rpx;
    color: #fff;
    margin-right: 10rpx;
}
.discount .zhe{
    background: #f2c028;
}
</style>